<template>
  <div>
    <el-dialog
      v-toggle-full
      v-loading.lock="loading"
      class="base-dialog storage-product-store-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="title"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <p slot="title">{{ title }}</p>
      <el-table
        v-if="tableList.length > 0"
        ref="table"
        :data="tableList"
        height="auto"
        :header-cell-style="{ height: '50px' }"
        :cell-style="{ height: '50px' }"
        style="width: 100%"
      >
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="库区">
          <template slot-scope="scope">
            {{ scope.row.storageAreaName }}
          </template>
        </el-table-column>
        <el-table-column label="库位">
          <template slot-scope="scope">
            {{ scope.row.storageSpaceName }}
          </template>
        </el-table-column>
        <el-table-column label="危化品编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="危化品名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            {{ scope.row.classOneName }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column label="包装单位">
          <template slot-scope="scope">
            {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column label="形态">
          <template slot-scope="scope">
            {{ scope.row.morphologyName }}
          </template>
        </el-table-column>
      </el-table>
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="序列号" prop="casNum">
          <el-input v-model="queryForm.serialNum" placeholder="序列号" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryForm.status" placeholder="状态">
            <el-option label="全部" :value="null" />
            <el-option label="在库可用" :value="100" />
            <el-option label="冻结" :value="200" />
            <el-option label="已出库" :value="300" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
          <el-button type="primary" @click="toPrintBarcode()"
            >打印条形码</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        :data="productStoreDetailsList"
        height="calc(100% - 130px)"
        :header-cell-style="{ height: '50px' }"
        :cell-style="{ height: '50px' }"
        style="width: 100%; overflow: auto"
      >
        <el-table-column label="序列号" width="150">
          <template slot-scope="scope">
            {{ scope.row.serialNum }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column label="初始毛重（克）">
          <template slot-scope="scope">
            {{ scope.row.initWeight }}
          </template>
        </el-table-column>
        <el-table-column label="剩余重量（克）">
          <template slot-scope="scope">
            {{ scope.row.residualWeight }}
          </template>
        </el-table-column>
        <el-table-column label="批次号">
          <template slot-scope="scope">
            {{ scope.row.batchNum }}
          </template>
        </el-table-column>
        <el-table-column label="入库时间">
          <template slot-scope="scope">
            {{ scope.row.batchCreateTime | dateTimeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="生产日期">
          <template slot-scope="scope">
            {{ scope.row.dateManufacture | dateTimeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="过期时间">
          <template slot-scope="scope">
            {{ scope.row.expirationTime | dateTimeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="条形码" width="280">
          <template slot-scope="scope">
            <JsBarcode :value="scope.row.serialNum" :valid="true"></JsBarcode>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              size="mini"
              type="primary"
              @click="updateSerialNum(scope.row)"
              >修改序列号</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">返 回</el-button>
      </div>
    </el-dialog>
    <StorageProductStoreUpdateSerialNum
      v-if="dialogUpdateSerialNumVisible"
      ref="StorageProductStoreUpdateSerialNum"
      :dialog-update-serial-num-visible.sync="dialogUpdateSerialNumVisible"
      :source-id.sync="sourceId"
      :serial-num.sync="serialNum"
    />
    <!-- 打印标签 -->
    <div
      id="printDiv"
      ref="printDiv"
      style="display: none; width: 60mm; height: 40mm"
    >
      <div
        v-for="item in productStoreDetailsList"
        :key="item.serialNum"
        style="
          page-break-after: always;
          vertical-align: middle;
          text-align: center;
          height: 70px;
        "
      >
        <img
          :src="item.serialNum | creatBarCode(item.serialNum)"
          style="max-width: 100%; max-height: 100%"
        />
      </div>
    </div>
    <iframe
      ref="printIframe"
      frameborder="0"
      scrolling="no"
      style="margin: 0px; padding: 0px; width: 0px; height: 0px"
    ></iframe>
  </div>
</template>

<script>
import StorageProductStoreUpdateSerialNum from "./StorageProductStoreUpdateSerialNum";
import {
  getInfo,
  getStoreDetailsList,
} from "../../../api/Storage/StorageProductStore.js";
import JsBarcode from "../../../components/JsBarcode.vue";
import BarcodeJs from "jsbarcode";
import moment from "moment";
export default {
  name: "StorageProductStoreEdit",
  components: {
    StorageProductStoreUpdateSerialNum,
    JsBarcode,
  },
  filters: {
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime;
      }
      return moment(dateTime).format("YYYY-MM-DD");
    },
    creatBarCode(barCodeData) {
      console.log("触发条码生成事件");
      const canvas = document.createElement("canvas");
      BarcodeJs(canvas, barCodeData, {
        format: "CODE128",
        displayValue: true,
        height: 40,
        width: 2,
        textAlign: "center",
        font: "cursive",
        fontOptions: "bold",
        fontSize: 20,
        textMargin: 5,
      });
      return canvas.toDataURL("image/png");
    },
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: "查看库存明细",
      loading: false,
      innerDialogFormVisible: false,
      dialogUpdateSerialNumVisible: false,
      tableList: [],
      queryForm: {
        storageProductStoreId: "",
        serialNum: "",
        status: null,
      },
      productStoreDetailsList: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      sourceId: "",
      serialNum: "",
    };
  },
  watch: {},
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.init();
  },
  deactivated() {
    var printIframe = this.$refs.printIframe;
    var html = this.$refs.printDiv.innerHTML;
    printIframe.setAttribute("srcdoc", html);
    printIframe.onload = function() {
      printIframe.contentWindow.focus();
      printIframe.contentWindow.close();
    };
  },
  methods: {
    async init() {
      if (this.editId) {
        await this.getDetail();
      }
    },
    getDetail() {
      getInfo({ id: this.editId }).then((res) => {
        this.queryForm.storageProductStoreId = this.editId;
        this.tableList.push(res.data);
        this.getList();
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.queryForm.serialNum = "";
      this.queryForm.status = "";
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getStoreDetailsList({
        ...this.queryForm,
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize,
      })
        .then((res) => {
          this.productStoreDetailsList = res.data.dataList
            ? res.data.dataList
            : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
      this.$emit("update:editId", "");
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    updateSerialNum(rowData) {
      console.log(rowData);
      this.dialogUpdateSerialNumVisible = true;
      this.sourceId = rowData.id;
      this.serialNum = rowData.serialNum;
    },
    // 标签打印
    toPrintBarcode() {
      var printIframe = this.$refs.printIframe;
      var html = this.$refs.printDiv.innerHTML;
      printIframe.setAttribute("srcdoc", html);
      printIframe.onload = function() {
        console.log(printIframe.contentWindow);
        // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = "0px";
        printIframe.contentWindow.document.body.style.margin = "0px";
        // 开始打印
        printIframe.contentWindow.focus();
        printIframe.contentWindow.print();
      };
    },
  },
};
</script>
<style lang="scss">
.storage-product-store-dialog {
  .el-form {
    margin-top: 20px;
    overflow: hidden;

    .el-form-item {
      float: left;
    }
  }

  .base-content-operate {
    display: block;
    overflow: hidden;

    .el-button {
      float: left;
    }
  }
}
</style>
